<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 引入vue，必须的 -->
  <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/element-ui/index.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入组件库 -->
  <script src="js/axios.js"></script>
  <script src="js/element-ui/index.js"></script>
  <title>Welcome to ShareArrangement</title>
</head>
<body>
  <div id="app">
    <div class="mid">

      <section>
        <div class="row__26fQN">
          <span class="icon__11ItG">
            <i class="icon-name-gray icons"></i>
          </span>&nbsp;
          <input id="userId" required="" name="userId" autocomplete="username" v-model="userId" autofocus="" type="text" placeholder="用户ID">
          <span class="inputBar__4JjeJ"></span>
          <div class="error__XuTf1">
            <p class="warn__fZGKv"></p>
          </div>
        </div>
        <div class="row__26fQN">
          <span class="icon__11ItG">
            <i class="icon-lock-gray icons"></i>
          </span>&nbsp;
          <input id="password" required="" name="password" autocomplete="current-password" v-model="password" type="password" placeholder="密码">
          <span class="inputBar__4JjeJ"></span>
          <div class="error__XuTf1">
            <p class="warn__fZGKv"></p>
          </div>
        </div>
        <button class="button__3eXSs " @click="login">登录</button>
      </section>

      <section class="linkContainer__KrVBv">
        <a class="link__vyju9" @click="forgot">忘记密码</a>
        <a class="link__vyju9" @click="signupPage">注册</a>
      </section>


        <el-drawer
                title="用户注册"
                :visible.sync="drawer"
                direction="ttb"
                size="50%">
          <section class="signUpMid">
          <div class="row__26fQN">
          <span class="icon__11ItG">
            <i class="icon-name-gray icons"></i>
          </span>&nbsp;
            <input id="signUserName" required="" name="username" autocomplete="username" v-model="username" autofocus=""
                   type="text" placeholder="用户名">
            <span class="inputBar__4JjeJ"></span>
            <div class="error__XuTf1">
              <p class="warn__fZGKv"></p>
            </div>
          </div>
          <div class="row__26fQN">
          <span class="icon__11ItG">
            <i class="icon-lock-gray icons"></i>
          </span>&nbsp;
            <input id="signPassword" required="" name="password" autocomplete="current-password" v-model="password"
                   type="password" placeholder="密码">
            <span class="inputBar__4JjeJ"></span>
            <div class="error__XuTf1">
              <p class="warn__fZGKv"></p>
            </div>
            <button class="button__3eXSs " @click="signup">注册</button>
          </div>
          </section>
        </el-drawer>


    </div>
  </div>
  <script>
      let vm=new Vue({
          el:"#app",
          data() {
              return {
                  drawer: false,
                  userId:"",
                  username:"",
                  password:""
              };
          },
          methods: {
              signup(){
                  axios.post('/users/signup', {
                      password:this.password,
                      username: this.username
                  }).then( response => {
                      console.log(response);
                      if(response.data.flag){
                          this.drawer = false;
                          this.userId = response.data.data;
                          this.$message({
                              message: '注册成功，用户ID已填入，请记住ID后登陆',
                              type: 'success'
                          });
                          //location.href = "main.html";
                      }else{
                          this.$message.error('注册失败');
                      }
                  });
              },
              signupPage(){
                  this.drawer = true
              },
              login(){
                  axios.post('/users/login', {
                        id: this.userId,
                        password:this.password
                  }).then( response => {
                      console.log(response)
                      if(response.data.flag){
                          this.$message({
                              message: '登陆成功',
                              type: 'success'
                          });
                          location.href = "main.html";
                      }else{
                          this.$message.error('登录失败');
                      }
                  });
              },
              forgot() {
                  const h = this.$createElement;
                  this.$notify.info({
                      title: '忘记密码',
                      message: h('i', { style: 'color: teal'}, ''),
                      showClose: false
                  });
              }
          }
      });
  </script>
</body>
</html>